// 该模块是用来包裹父容器给UI组件的 并且处理redux中的状态的

import { connect } from 'react-redux'  // 引入connect函数

import Count2 from '../../components/Count2'  // 引入UI组件

import { increment, decrement, createAsyncIncrement } from '../../redux/actions/count_action'  // 引入创建action对象的函数

/**
 * 用来传递给UI组件状态
 * 1、mapStateToProps函数返回的是一个对象
 * 2、返回对象中的key就作为传递给UI组件的props的key,value就作为传递给UI组件的props的value
 * 3、mapStateToProps用于传递状态
 * @params state -> store中的状态 人家内部给你处理好的 可以直接使用
 */
// function mapStateToProps(state) {
//   return { count: state }
// }

/**
 * 用来传递给UI组件修改状态的方法
 * 1、mapDispatchToProps函数返回的是一个对象
 * 2、返回对象中的key就作为传递给UI组件的props的key,value就作为传递给UI组件的props的value
 * 3、mapDispatchToProps用于传递操作状态的方法
 * @params dispatch -> store中的dispatch方法 内部经过处理的 可以直接使用这个方法分发
 */
// function mapDispatchToProps(dispatch) {
//   return {
//     increment: (data) => dispatch(increment(data)),
//     decrement: (data) => dispatch(decrement(data)),
//     asyncIncrement: (data, time) => dispatch(createAsyncIncrement(data, time)),
//   }
// }

/**
 * 创建了一个父容器 关联了UI组件
 * 使用connect()()创建并暴露出一个Count的容器组件
 */
// export default connect(mapStateToProps, mapDispatchToProps)(Count2)


// ------------使用简写的形式----------------------------------------
/**
 * 将mapDispatchToProps写成一个对象
 * 对象的值是redux中生成action对象的函数
 * react-redux内部会有api帮助你直接执行分发dispatch动作的
 */
export default connect(
  state => ({ count: state }),
  {
    increment: increment,
    decrement: decrement,
    asyncIncrement: createAsyncIncrement
  }
)(Count2)